<template>
    <div style="width: 256px">
        <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
            <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
        </a-button>
        <a-menu
                :defaultSelectedKeys="['1']"
                :defaultOpenKeys="['2']"
                mode="inline"
                theme="dark"
                :inlineCollapsed="collapsed"
        >
            <template v-for="item in this.$store.state.userInfo.resTree">
                <a-menu-item v-if="!item.children" :key="item.id">
                    <a-icon type="pie-chart" />
                    <span>{{item.name}}</span>
                </a-menu-item>
                <sub-menu v-else :menu-info="item" :key="item.id"/>
            </template>
        </a-menu>
    </div>
</template>

<script>
    import SubMenu from './SubMenu'
    export default {
        created() {
            this.$store.commit('initUserCfg');
        },
        components: {
            'sub-menu': SubMenu,
        },
        data () {
            return {
                collapsed: false
            }
        },
        methods: {
            toggleCollapsed () {
                this.collapsed = !this.collapsed
            },
        },
    }
</script>